<template>
  <van-address-edit
    :area-list="areaList"
    :address-info="addressInfo"
    show-postal
    show-delete
    show-set-default
    show-search-result
    :search-result="searchResult"
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @delete="onDelete"
    @change-detail="onChangeDetail"
  />

</template>

<script>
import { areaList } from '@vant/area-data';
export default {
  data() {
    return {
      areaList,
      searchResult:[],
      addressInfo:{
        name:'张三丰',
        tel:'13966667777',
        addressDetail:'详细地址',
        areaCode:	'130203',
        postalCode:'400000',
        isDefault:false
      }
    }
  },
  computed: {
    addressList() {
      return this.$store.state.address.addressList 
    }
  },
  created () {
    console.log(this.$route.query);
    let {idx} = this.$route.query //区分新增、编辑
    this.addressInfo = this.addressList[idx] //根据路由地址下标，从状态机中提取对应的地址对象
  },
  methods: {
    onSave(content){
      console.log(content);
      let {province,city,county,addressDetail} = content
      content.address = province+city+county+addressDetail
      let {idx} = this.$route.query
      if(idx==-1){  //新增
        content.id = Math.random()
        this.$store.commit('address/addressAddMut',content)
      }else{  //编辑
        this.$store.commit('address/addressEditMut',{
          addressObj:content,
          editIdx:idx
        })
      }
    },
    onDelete(){},
    onChangeDetail(val){
      if (val) {
        searchResult.value = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        searchResult.value = [];
      }
    }
  },
};

</script>

<style lang="scss" scoped>

</style>